<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
		<link rel="stylesheet" href="../../Content/css/base.css" />
		<link rel="stylesheet" type="text/css" href="../../Content/css/user.css"/>
		<link rel="stylesheet" type="text/css" href="../../Content/css/yhr.css"/>
 
       
    </head>
    <body>
       <!-- Button trigger modal -->
<input type="text" class="form-control" placeholder="行业" data-toggle="modal" data-target="#myModal" id="hangyezhineng">


<!--行业职能弹窗-->
<div class="modal fade" id="myModal"  aria-hidden="true">
	<div class="modal-dialog">
		<div class="aui_state_lock aui_state_focus">
    <div class="aui_outer">
      <table class="aui_border">
        <tbody>
          <tr>
            <td class="aui_nw"></td>
            <td class="aui_n"></td>
            <td class="aui_ne"></td>
          </tr>
          <tr>
            <td class="aui_w"></td>
            <td class="aui_c"><div class="aui_inner">
                <table class="aui_dialog">
                  <tbody>
                    <tr>
                      <td class="aui_header" colspan="2"><div class="aui_titleBar">
                          <div class="aui_title" style="cursor: move;">行业职能</div>
                          <a href="javascript:;" class="aui_close" data-dismiss="modal">×</a></div></td>
                    </tr>
                    <tr>
                      <td class="aui_icon" style="display: none;"><div class="aui_iconBg" style="background: none repeat scroll 0% 0% transparent;"></div></td>
                      <td class="aui_main" style="width: auto; height: auto; visibility: visible;"><div class="aui_content" style="padding: 0px;">
                          <style>
</style>
                          <div id="NTGUID__4">
                            <div class="data-result" id="dataResult"><em>最多选择 <strong>1</strong> 项</em></div>
                            <div class="data-tabs" id="dataTabs">
                              <ul>
                                <li data-selector="tab-all" class="active"><a href="javascript:;"><span>全部职能</span><em></em></a></li>
                              </ul>
                            </div>
                            <div class="data-container data-container-0"> 
                              <!--1-->
                              <div class="view-all" id="NTGUID__4NDTGUID__5">
                                <div class="cate-list-normal">
                                  <ul class="clearfix">
                                    <li><a href="javascript:;" data-code="cate-01" class="d-cate">互联网/游戏/软件</a></li>
                                    <li><a href="javascript:;" data-code="cate-02" class="d-cate">电子/通信/硬件</a></li>
                                    <li><a href="javascript:;" data-code="cate-03" class="d-cate">房地产/建筑/物业</a></li>
                                    <li><a href="javascript:;" data-code="cate-04" class="d-cate">金融</a></li>
                                    <li><a href="javascript:;" data-code="cate-05" class="d-cate">消费品</a></li>
                                    <li><a href="javascript:;" data-code="cate-06" class="d-cate">汽车/机械/制造</a></li>
                                    <li><a href="javascript:;" data-code="cate-07" class="d-cate">服务/外包/中介</a></li>
                                    <li><a href="javascript:;" data-code="cate-08" class="d-cate">广告/传媒/教育/文化</a></li>
                                    <li><a href="javascript:;" data-code="cate-09" class="d-cate">交通/贸易/物流</a></li>
                                    <li><a href="javascript:;" data-code="cate-10" class="d-cate">制药/医疗</a></li>
                                    <li><a href="javascript:;" data-code="cate-11" class="d-cate">能源/化工/环保</a></li>
                                    <li><a href="javascript:;" data-code="cate-12" class="d-cate">政府/农林牧渔</a></li>
                                  </ul>
                                </div>
                              </div>
                              <!--2-->
                              <div class="view-cate" id="NTGUID__4NDTGUID__o" style="display:none">
                                <div class="cate-list-subs">
                                  <ul class="clearfix">
                                    <li><a href="javascript:;" data-code="cate-02-01" class="d-cate">电子技术/半导体/集成电路</a></li>
                                    <li><a href="javascript:;" data-code="cate-02-02" class="d-cate">通信(设备/运营/增值)</a></li>
                                    <li><a href="javascript:;" data-code="cate-02-03" class="d-cate">计算机硬件/网络设备</a></li>
                                  </ul>
                                </div>
                              </div>
                              <!--3-->
                              <div class="view-tree" id="NTGUID__4NDTGUID__m" style="display:none">
                                <div class="tree-container">
                                  <div class="tree-list">
                                    <ul>
                                      <li class="odd d-tree-active"><a title="技术" href="javascript:;" data-code="549" class="d-tree d-tree-multies">技术 </a></li>
                                      <li class="odd"><a title="测试" href="javascript:;" data-code="543" class="d-tree">测试 </a></li>
                                      <li><a title="高级管理" href="javascript:;" data-code="530" class="d-tree">高级管理 </a></li>
                                      <li class="odd"><a title="人力资源" href="javascript:;" data-code="531" class="d-tree">人力资源 </a></li>
                                      <li><a title="财务" href="javascript:;" data-code="532" class="d-tree">财务 </a></li>
                                      <li class="odd"><a title="市场营销" href="javascript:;" data-code="533" class="d-tree">市场营销 </a></li>
                                      <li><a title="公关" href="javascript:;" data-code="534" class="d-tree">公关 </a></li>
                                      <li class="odd"><a title="销售/客服/技术支持" href="javascript:;" data-code="hot-06" class="d-tree">销售/客服/技术支持 </a></li>
                                      <li><a title="法务" href="javascript:;" data-code="539" class="d-tree">法务 </a></li>
                                      <li class="odd"><a title="行政" href="javascript:;" data-code="540" class="d-tree">行政 </a></li>
                                      <li><a title="企业信息化" href="javascript:;" data-code="541" class="d-tree">企业信息化 </a></li>
                                    </ul>
                                  </div>
                                  <div class="tree-item-list" style="height: 318px;">
                                    <div class="view-tree-items" id="NTGUID__4NDTGUID__n">
                                      <div class="item-list">
                                        <ul class="clearfix">
                                          <li><a title="首席技术官CTO/首席信息官CIO" href="javascript:;" data-code="010030" class="d-item">首席技术官CTO/首席信息官CIO</a></li>
                                          <li><a title="电池/电源开发" href="javascript:;" data-code="110360" class="d-item">电池/电源开发</a></li>
                                          <li><a title="集成电路IC设计/应用工程师" href="javascript:;" data-code="110130" class="d-item">集成电路IC设计/应用工程师</a></li>
                                          <li><a title="自动控制工程师/技术员" href="javascript:;" data-code="110350" class="d-item ">自动控制工程师/技术员</a></li>
                                          <li><a title="IC验证工程师" href="javascript:;" data-code="110380" class="d-item">IC验证工程师</a></li>
                                          <li><a title="电子/电路工程师" href="javascript:;" data-code="110010" class="d-item">电子/电路工程师</a></li>
                                          <li><a title="电子技术研发工程师" href="javascript:;" data-code="110180" class="d-item">电子技术研发工程师</a></li>
                                          <li><a title="射频工程师" href="javascript:;" data-code="110310" class="d-item">射频工程师</a></li>
                                          <li><a title="技术文档工程师" href="javascript:;" data-code="110140" class="d-item">技术文档工程师</a></li>
                                          <li><a title="电子/电器维修" href="javascript:;" data-code="110110" class="d-item">电子/电器维修</a></li>
                                          <li><a title="变压器与磁电工程师" href="javascript:;" data-code="110320" class="d-item">变压器与磁电工程师</a></li>
                                          <li><a title="版图设计工程师" href="javascript:;" data-code="110330" class="d-item">版图设计工程师</a></li>
                                          <li><a title="电器工程师" href="javascript:;" data-code="110020" class="d-item">电器工程师</a></li>
                                          <li><a title="电子软件开发(ARM/MCU…)" href="javascript:;" data-code="110390" class="d-item">电子软件开发(ARM/MCU…)</a></li>
                                          <li><a title="嵌入式软件开发(Linux/单片机/DLC/DSP…)" href="javascript:;" data-code="110070" class="d-item">嵌入式软件开发(Linux/单片机/DLC/DSP…)</a></li>
                                          <li><a title="嵌入式硬件开发(主板机…)" href="javascript:;" data-code="110065" class="d-item">嵌入式硬件开发(主板机…)</a></li>
                                          <li><a title="光源与照明工程师" href="javascript:;" data-code="110120" class="d-item">光源与照明工程师</a></li>
                                          <li><a title="机械工程师" href="javascript:;" data-code="110160" class="d-item">机械工程师</a></li>
                                          <li><a title="电气工程师" href="javascript:;" data-code="110170" class="d-item">电气工程师</a></li>
                                          <li><a title="工程与项目实施" href="javascript:;" data-code="110190" class="d-item">工程与项目实施</a></li>
                                          <li><a title="线路电气设计" href="javascript:;" data-code="110400" class="d-item">线路电气设计</a></li>
                                          <li><a title="线路结构设计" href="javascript:;" data-code="110401" class="d-item">线路结构设计</a></li>
                                          <li><a title="机电工程师" href="javascript:;" data-code="110402" class="d-item">机电工程师</a></li>
                                          <li><a title="自动化工程师" href="javascript:;" data-code="110403" class="d-item">自动化工程师</a></li>
                                          <li><a title="模拟电路设计/应用工程师" href="javascript:;" data-code="110404" class="d-item">模拟电路设计/应用工程师</a></li>
                                          <li><a title="空调工程/设计" href="javascript:;" data-code="110405" class="d-item">空调工程/设计</a></li>
                                          <li><a title="仪器/仪表/计量" href="javascript:;" data-code="110406" class="d-item">仪器/仪表/计量</a></li>
                                          <li><a title="安防工程师(安全防范系统)" href="javascript:;" data-code="110407" class="d-item">安防工程师(安全防范系统)</a></li>
                                          <li><a title="FAE现场应用工程师" href="javascript:;" data-code="110370" class="d-item">FAE现场应用工程师</a></li>
                                          <li><a title="工艺工程师" href="javascript:;" data-code="110040" class="d-item">工艺工程师</a></li>
                                          <li><a title="家用电器/数码产品研发" href="javascript:;" data-code="110060" class="d-item">家用电器/数码产品研发</a></li>
                                          <li><a title="电子元器件工程师" href="javascript:;" data-code="110100" class="d-item">电子元器件工程师</a></li>
                                          <li><a title="电声/音响工程师/技术员" href="javascript:;" data-code="110050" class="d-item">电声/音响工程师/技术员</a></li>
                                          <li><a title="激光/光电子技术" href="javascript:;" data-code="110340" class="d-item">激光/光电子技术</a></li>
                                          <li><a title="半导体技术" href="javascript:;" data-code="110090" class="d-item">半导体技术</a></li>
                                        </ul>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div></td>
                    </tr>
                    <tr>
                      <td class="aui_footer" colspan="2"><div class="aui_buttons" style="">
                          <button class="aui-btn aui-btn-primary" type="button" id="zn_submit" data-dismiss="modal">确定</button>
                          <button class="aui-btn aui-btn-light" type="button" data-dismiss="modal">取消</button>
                        </div></td>
                    </tr>
                  </tbody>
                </table>
              </div></td>
            <td class="aui_e"></td>
          </tr>
          <tr>
            <td class="aui_sw"></td>
            <td class="aui_s"></td>
            <td class="aui_se" style="cursor: se-resize;"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
	</div>
  </div>

<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
<script src="../../Scripts/jquery.searchbox.animate.js"></script>
<script src="../../Scripts/base.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*行业职能*/
		var dataTabs   = $('#dataTabs');
		var dataResult = $('#dataResult');
		var oneClass   = $('#NTGUID__4NDTGUID__5');		//第一大类
		var twoClass   = $('#NTGUID__4NDTGUID__o');		//第二大类
		var threeClass = $('#NTGUID__4NDTGUID__m');		//第三大类
		oneClass.find('ul li a').bind('click',function(){
			//将li元素删除active样式
			dataTabs.find('ul li').removeClass('active');
			//追加带样式active的li元素
			dataTabs.find('ul').append('<li data-selector="tab-all" class="active"><a href="javascript:;"><span>'+ $(this).html() +'</span><em></em></a></li>');
			//大类切换
			yselTab();
			//使第一大类隐藏 显示第二大类
			oneClass.hide();
			twoClass.show();
		})
		twoClass.find('ul li a').bind('click',function(){
			//将li元素删除active样式
			dataTabs.find('ul li').removeClass('active');
			//追加带样式active的li元素
			dataTabs.find('ul').append('<li data-selector="tab-all" class="active"><a href="javascript:;"><span>'+ $(this).html() +'</span><em></em></a></li>');
			//大类切换
			yselTab();
			//使第二大类隐藏 显示第三大类
			twoClass.hide();
			threeClass.show();
		})
		threeClass.find('.tree-list ul li a').bind('click',function(){
			//第三大类左侧树形菜单添加样式
			threeClass.find('.tree-list ul li').removeClass('d-tree-active');
			$(this).parent().addClass('d-tree-active');
		})
		threeClass.find('.item-list ul li a').bind('click',function(){
			//第三大类右侧删除样式再当前元素添加样式
			threeClass.find('.item-list ul li a').removeClass('d-item-active');
			$(this).addClass('d-item-active');
			//添加选中元素
			dataResult.find('span').remove();
			dataResult.append('<span>'+ $(this).html() +'<i>×</i></span>');
			//删除选中的元素
			dataResult.find('span i').unbind('click').click(function(){
				$(this).parent().remove();
				threeClass.find('.item-list ul li a').removeClass('d-item-active');
			});
		})
		//点击确定按钮将选中的值赋值到文本框中
		$('#zn_submit').click(function(){
			var checkHtml = dataResult.find('span').html();
			if(typeof checkHtml == 'string'){
				checkHtml = checkHtml.replace('<i>×</i>','');
				$('#hangyezhineng').val(checkHtml);
			}
		});
		
		dataTabs.find('ul li').bind('click',function(){
			$(this).nextAll('li').remove();
		})
		/*大类切换*/
		function yselTab(){
			dataTabs.find('ul li').each(function(i){
				$(this).bind('click',function(){
					$(this).nextAll('li').remove();
					switch(i){
						case 0:
							oneClass.show();
							twoClass.hide();
							threeClass.hide();
							break;
						case 1:
							oneClass.hide();
							twoClass.show();
							threeClass.hide();
							break;
						case 2:
							oneClass.hide();
							twoClass.hide();
							threeClass.show();
							break;
					}
				});
			});
		};
</script>
</body>
</html>